<template>
  <div class="Like">
    <div class="Like-top">
      <img
        src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"
        alt=""
      />
      <span>猜你喜欢</span>
    </div>

    <ul class="like-button">
      <li
        class="like-item border-button"
        v-for="value in likeList"
        :key="value.id"
        @click="toDetails"
      >
        <div class="like-img">
          <img :src="value.imgUrl" alt="" />
        </div>

        <div class="like-text">
          <div class="like-title">{{ value.title }}</div>
          <div class="like-message">{{ value.msg }}</div>
          <div class="like-map">
            <span class="like-mark"
              >￥<b>{{ value.pre }}</b></span
            >
            起
            <span class="like-item-map">{{ value.map }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["likeList"],
  name: "Like",
  data() {
    return {};
  },
  methods:{
    toDetails(){
      this.$router.push("/detail")
    }
  }
};
</script>

<style scoped>
.Like {
  margin-top: 0.2rem;
  padding: 0 0.2rem;
  background: #fff;
}
.Like-top {
  font-size: 0.32rem;
  padding: 0.24rem 0rem;
  color: #212121;
}
.like-button {
  overflow: hidden;
}
.Like-top span {
  margin-left: 0.08rem;
}
.Like-top img {
  width: 0.3rem;
  height: 0.3rem;
}
.like-item {
  overflow: hidden;
  padding: 0.2rem 0;
  position: relative;
}
.like-item .like-img {
  float: left;
  width: 2rem;
  height: 2rem;
}
.like-item .like-img img {
  width: 100%;
  height: 100%;
}
.like-item .like-text {
  overflow: hidden;
  padding-left: 0.22rem;
}
.like-item .like-text .like-title {
  margin-top: 0.26rem;
  font-size: 0.32rem;
  color: #212121;
}
.like-item .like-text .like-message {
  font-size: 0.24rem;
  margin-top: 0.34rem;
  color: #616161;
}
.like-item .like-text .like-map {
  font-size: 0.24rem;
  margin-top: 0.22rem;
  color: #616161;
  position: relative;
}
.like-mark {
  color: #ff8300;
}
.like-mark b {
  font-size: 0.4rem;
}
.like-item-map {
  position: absolute;
  right: 0.24rem;
}
</style>